<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>实时分组</title>
<style type="text/css">
	.step{
		display: inline-block;
		width:25%;
		min-width:100px;
		height:50px;
		float:left;
		color:#888;
		line-height:50px;
		font-size:18px;
		text-align:center;
		overflow:hidden;
		position:relative;
		background-color:#ebebeb;
		background-image: url(images/navBtn.jpg);
		background-position: right bottom;
		background-repeat: no-repeat;
	}
	.step.current{
		color:white;
		background-color:#4285f4;
		background-image: url(images/navCurrentBtn.jpg);
	}
	.step.lastDone{
		color:white;
		background-color:#15bb6b;
		background-image: url(images/navLastDoneBtn.jpg);
	}
	.step.done{
		color:white;
		background-color:#15bb6b;
		background-image: url(images/navDoneBtn.jpg);
	}
	section[id]{
		display: none;
	}
	section#step1{
		display: inherit;
	}
	#step2manually table{
		width:100%;
	}
	#step2manually table td{
		padding:5px;
		text-align: right;
	}
	#step2manually table td.title{
		padding:5px;
		text-align: left;
	}
	#diags,#opers{
		min-height:45px;
	}
	#diags>div,#opers>div{
		margin-bottom:5px;
		text-align: center;
	}
	#diags>div input.name,#opers>div input.name{
		min-width: 370px;
	}
	#diags>div input,#opers>div input{
		margin: 0 2px;
	}
	#step4 .panel{
		text-align: center;
	}
	#step4 .panel table{
    	font-size: 15px;
    	color: #4A4A4A;
	    width: 100%;
	}
	#step4 .panel table td{
		padding:5px;
	}
	.fa-arrow-circle-up,.fa-arrow-circle-down,.fa-minus-square{
		font-size:20px;
		cursor: pointer;
		color:#bbb;
	}
	.fa-arrow-circle-up:hover{
		color:#71d2d9;
	}
	.fa-arrow-circle-down:hover{
		color:#71d2d9;
	}
	.fa-minus-square:hover{
		color:#F87D7F;
	}
	.bg-blue{
		background-color: #71d2d9;
	}
	.ue-animation{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;-webkit-animation-duration:.8s;-webkit-animation-delay:.2s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:both;-moz-animation-duration:.8s;-moz-animation-delay:.2s;-moz-animation-timing-function:ease;-moz-animation-fill-mode:both;-ms-animation-duration:.8s;-ms-animation-delay:.2s;-ms-animation-timing-function:ease;-ms-animation-fill-mode:both;-o-animation-duration:.8s;-o-animation-delay:.2s;-o-animation-timing-function:ease;-o-animation-fill-mode:both;animation-duration:.8s;animation-delay:.2s;animation-timing-function:ease;animation-fill-mode:both}
	.ue-shake{-webkit-animation-name:shake;-moz-animation-name:shake;-o-animation-name:shake;animation-name:shake}
	@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);border:1px solid #aaa;}
	10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px)}
	20%,40%,60%,80%{-webkit-transform:translateX(10px);border:1px solid red;}
	}
	@-moz-keyframes shake{0%,100%{-moz-transform:translateX(0);border:1px solid #aaa;}
	10%,30%,50%,70%,90%{-moz-transform:translateX(-10px)}
	20%,40%,60%,80%{-moz-transform:translateX(10px);border:1px solid red;}
	}
	@-o-keyframes shake{0%,100%{-o-transform:translateX(0);border:1px solid #aaa;}
	10%,30%,50%,70%,90%{-o-transform:translateX(-10px)}
	20%,40%,60%,80%{-o-transform:translateX(10px);border:1px solid red;}
	}
	@keyframes shake{0%,100%{transform:translateX(0);border:1px solid #aaa;}
	10%,30%,50%,70%,90%{transform:translateX(-10px)}
	20%,40%,60%,80%{transform:translateX(10px);border:1px solid red;}
	}
	.import-div{
		max-width: 50%;
		margin-top:50px;
		margin-bottom:50px;
		text-align:center;
		padding:50px;
		padding-bottom:80px;
		border-radius: 10px;
	    border: 1px solid #ddd;
	    box-shadow: 0 15px 80px rgba(0,0,0,.2);
	    background-color: white;
	}
</style>
</head>
<body style="min-width:480px;">
	<div class="container-fluid">
		<div class="row" style="min-width: 410px;">
			<div><h2 align="center">病例分组</h2></div>
			<div class="col-md-12">
				<div class="step one current"><span>1.选择录入方式</span></div>
				<div class="step two">2.录入病例信息</div>
				<div class="step three">3.进行分组</div>
				<div class="step four" style="background-image: none;">4.显示分组结果</div>
			</div>
		</div>
		
		<div class="row">
			<div class="col-md-12">
				<section id="step1">
					<div class="center-block import-div">
				      <button type="button" class="btn btn-default btn-lg btn-block" onclick="toStep2('manually')"><i class="fa fa-keyboard-o fa-lg"></i>&nbsp;&nbsp;手动录入</button>
				      <button type="button" class="btn btn-default btn-lg btn-block" onclick="toStep2('excel')"><i class="fa fa-file-excel-o fa-lg"></i>&nbsp;&nbsp;Excel导入</button>
				      <button type="button" class="btn btn-default btn-lg btn-block" onclick="toStep2('findInSys')"><i class="fa fa-file-excel-o fa-lg"></i>&nbsp;&nbsp;选择系统病例</button>
				    </div>
				</section>
				
				<section id="step2manually">
					
				</section>
				
				<section id="step2excel">
					<div class="center-block import-div">
						<div class="row">
						  <div class="col-md-4 col-md-offset-2">
						     <input id="medicalRecord_upload_online" type="file" name="file" style="display: none;"/>
						  </div>
						   <div class="col-md-4">
	     						  <div style="float: right;margin-right: 35px;border-radius: 3px;float: left;" class="btn-clickable">
				            		 <a href="download/onLineGroup.xlsx" class="link text-sm" style = "text-decoration:none;color:#fff"><i class="fa fa-download"></i>&nbsp;下载模版 </a>
				           		 </div>
						  </div>
				            
						</div>
						<div  class="row" style="margin-top: 10px;">
							<div style="float: left; line-height: 30px;">
							<label>分组器版本：</label>
							</div>
							<div style="float: left; line-height: 30px; padding: 0px 10px;">
								<select class="groupVersion form-control"
									style="width: 155px; float: left;" id='VER_CODE_find'></select>
							</div>
							<div style="float: left; line-height: 30px;">
								<label>ICD对照：</label> <input type="radio" class="form-control"
									name="ICDStepTwo" value="1">是&nbsp;&nbsp; <input
									type="radio" class="form-control" name="ICDStepTwo" value="0"
									checked="checked">否
							</div>
						</div>
				    </div>
				    <button class="btn btn-primary pull-right" style="margin-left:10px;" onclick="toStep3('excel')">开始分组</button>
				    <button class="btn btn-default pull-right" onclick="toStep1()">上一步</button>
				</section>
				
				<section id="step2find">
					<div class="center-block import-div">
						<div class="row">
						<div style="float: left; line-height: 30px;">
							<label>病案号&#12288; &#12288; ：</label>
							</div>
							<div style="float: left; line-height: 30px; padding: 0px 10px;">
								<input id="findInSystem" class=" form-control" type="input"title='输入多个病案号请用英文逗号隔开' placeholder='输入病案号'style="width: 190px; height: 31px; float: left;" />
							</div>
							<div style="float: left; line-height: 30px;">
								<button class="btn btn-primary" onclick="findDataInDatabase()">查询</button>
							</div>
						</div>
						<div  class="row" style="margin-top: 10px;">
							<div style="float: left; line-height: 30px;">
							<label>分组器版本：</label>
							</div>
							<div style="float: left; line-height: 30px; padding: 0px 10px;">
								<select class="groupVersion form-control"
									style="width: 155px; float: left;" id='VER_CODE_find'></select>
							</div>
							<div style="float: left; line-height: 30px;">
								<label>ICD对照：</label> <input type="radio" class="form-control"
									name="ICDStepThree" value="1">是&nbsp;&nbsp; <input
									type="radio" class="form-control" name="ICDStepThree" value="0"
									checked="checked">否
							</div>
							<div style="float: left; line-height: 30px;">
								<button class="btn btn-primary pull-right" style="margin-left:10px;margin-right:10px;" onclick="doGroup('findAll')">开始分组</button>
							</div>
						</div>
					</div>
					<div class="clearfix" style="margin-top: 50px;">
						<button class="btn btn-default pull-right" style="" onclick="toStep1()">上一步</button>
					</div>
					<div  id="resultOnLine" style="margin-top: 10px;">
					 	</div>
					<div class="panel panel-success" id="resultGroup" style="margin-top:50px;">
						  <!-- Default panel contents -->
						  <!-- <button class="btn btn-primary pull-right" onclick="InsertResult()">更新系统分组结果</button> -->
						  <div class="panel-heading">分组结果</div>
						  <div class="panel-body"></div>
					  </div>
				</section>
				
				<section id="step3">
			        <div style="position: relative;width: 80%;margin:0 auto;text-align: center;font-size: 20px;color:#05272D;overflow:hidden; height: 200px;">
						<div id="progress_info" style="position: absolute;bottom:0;width: 100%;"></div>
						<div id="progress_info_detail" style="position: absolute;bottom:0;right:0;text-align:right; width: 50%;color: #888;font-size: 16px;"></div>
						<div style="position: absolute;bottom:0;left:0;text-align:left; width: 50%;color: #888;font-size: 26px;"><i class="fa fa-cog fa-spin"></i></div>
					</div>
					
					<!-- 进度条 -->
				    <div class="progress" style="width: 80%;margin: 0 auto;">
					  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100">
					    <span></span>
					  </div>
					</div>
					
					<div style="position: relative;width: 80%;margin:0 auto;text-align: center;height: 22px;font-size: 20px;overflow:hidden;">
						<div id="progress_usedtime" style="position: absolute;left:0;text-align:left; width: 50%;color: #888;font-size: 16px;"></div>
						<!-- 
						<div style="position: absolute;right:0;text-align:right; width: 50%;color: #888;font-size: 16px;">预计剩余时间：<span id="progress_time" style="width:110px;display: inline-block;"></span></div>
						 -->
					</div>
					<!-- <button class="btn btn-primary pull-right" onclick="reGroupBtn()">重新分组</button> -->
				</section>
				
				<section id="step4">
					<div class="panel panel-success"></div>
				    <div id="resultTableDiv"></div>
				    <!-- <button class="btn btn-primary pull-right" onclick="reGroupBtn()">重新分组</button> -->
				</section>
			</div>
		</div>
	</div>
<script>
$(document).ready(function(){
  $('#'+tabId+' input').iCheck({
    checkboxClass: 'icheckbox_square-blue',
    radioClass: 'iradio_square-blue',
    increaseArea: '20%' // optional
  });
});
</script>
</body>
<script type="text/javascript" src="<%=request.getContextPath() %>/lib/uplodifyh5/event_common.js"></script>
<script src="js/dataMonitor/drgsGroup.js"></script>
</html>